<template>
  <div class="app">
    <van-nav-bar
      title="订单信息"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div
      class="order_card"
      v-if="orderinfo.table != null && orderinfo.table.length > 0"
    >
      <div class="text">对局信息</div>
      <div class="info1">
        <div>订单编号</div>
        <div>{{ orderinfo.table[0].order_id }}</div>
      </div>
      <div class="info1">
        <div>桌号信息</div>
        <div>{{ orderinfo.table[0].store_name }}{{ orderinfo.table[0].ordercontent }}</div>
      </div>
      <div class="info1">
        <div>开台时间</div>
        <div>{{ orderinfo.table[0].open_time }}</div>
      </div>
      <div class="info1">
        <div>结算时间</div>
        <div>{{ orderinfo.table[0].close_time }}</div>
      </div>
      <div class="info1">
        <div>使用时长</div>
        <div>{{ orderinfo.table[0].playtime }}</div>
      </div>
      <div class="info1">
        <div>支付金额</div>
        <div>￥{{ orderinfo.table[0].pay_money }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderinfo: {},
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    getTimeStamp(timeStr) {
      const [date, time] = timeStr.split(" ");
      const [year, month, day] = date.split("-");
      const [hour, minute, second] = time.split(":");
      return (
        new Date(year, month - 1, day, hour, minute, second).getTime() / 1000
      );
    },

    // 计算相差时间
    getTimeDifference(openTime, closeTime) {
      const openTimeStamp = this.getTimeStamp(openTime);
      const closeTimeStamp = this.getTimeStamp(closeTime);
      let timeDiff = closeTimeStamp - openTimeStamp;
      if (timeDiff < 0) {
        timeDiff += 24 * 60 * 60; // 加上一天的秒数
      }
      const hours = Math.floor(timeDiff / 3600);
      const minutes = Math.floor((timeDiff % 3600) / 60);
      const seconds = Math.floor(timeDiff % 60);
      return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
        2,
        "0"
      )}:${String(seconds).padStart(2, "0")}`;
    },
    initData(data) {
      if (data.table != null && data.table.length > 0) {
        for (var i = 0; i < data.table.length; i++) {
          data.table[i].playtime = this.getTimeDifference(
            data.table[i].open_time,
            data.table[i].close_time
          );
        }
      }
    },
  },
  created() {
    this.orderinfo = JSON.parse(this.$route.params.orderinfo);
    this.initData(this.orderinfo);
  },
};
</script>

<style scoped>
.app {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f3f5;
}
.order_card {
  width: 90%;
  margin: 10px auto;
  background-color: white;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
}
.text {
  font-size: 20px;
  margin-bottom: 10px;
}
.info1 {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  align-items: flex-end;
  margin: 5px auto;
}
</style>